<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
          min-height: 300px;
          background-color: orange;
          color: #fff;
          font-size: 30px;
        }
  
        .v-enter,
        .v-leave-to {
          opacity: 0;
        }
  
        .v-enter-active,
        .v-leave-active {
          transition: all 1s;
        }
        .v-enter-to,
        .v-leave {
          opacity: 1;
        }
      </style>
</head>

<body>
    <!-- vue-router的基本使用 -->
    <div id="app">
      <!-- vue-router 提供了2个组件 router-view / router-link -->

      <game-com></game-com>
      <!-- router-link会被渲染成a标签 to属性决定路由的跳转地址,默认hash模式 -->
      <router-link to="/tech">科技</router-link>
      <router-link to="/game">游戏</router-link>
      <router-link to="/money">财经</router-link>


      <!-- router-view  （本质上就是一个动态组件） -->
      <router-view></router-view>
    </div>
    <!-- vue引入 -->
    <script src="./vue.min.js"></script>
    <!-- 引入vue router -->
    <script src="./vue-router.min.js"></script>
    <script>
     const randomComponent = (name, title) => ({
        name,
        template: `<div class="box" :style="{backgroundColor: color}">
            <p>{{title}}</p> 
          </div>`,
        data() {
          const getRandomColor = () =>
            `rgb(${~~(Math.random() * 255)}, ${~~(Math.random() * 255)}, ${~~(
              Math.random() * 255
            )})`;
          return {
            name,
            title,
            color: getRandomColor(),
          };
        },
        created(){
            console.log("111111111111111");
            console.log("route",this.$route);
        }
      });

  
    //   1.写好路由表
    const a = [{
        path: "/tech",
        //  randomComponent("TechCom","科技板块"),这里的一整个才是我的组件，所以这里的TechCom只是我传的一个值
        component: randomComponent("TechCom","科技板块"),
        name: "tech",
    },{
        path: "/game",
        component: randomComponent("GameCom","游戏板块"),
        name: "game",
    },{
        path: "/money",
        component: randomComponent("MoneyCom","财经板块"),
        name: "money",
    },]

    // console.log("routes",routes)

    // 2.生成对应的vue-router的实例
    const b = new VueRouter({
        // mode: "history",//默认hash模式
        routes:a //a,b,c
    })

    // console.log("router  2",router)

    // 3.创建vue的根组件实例，把router实例进行注入，
    // 注入后，根组件下的所有组件a,b,c都可以访问router实例,通过vm.$router访问
    const vm = new Vue({
        el:"#app",
        router:b //a,b,c

        
    })
    console.log("vm",vm.$router)
    </script>
</body>
</html>